<template>
    <div class="page" ref="page">
        <div class="headfix">
            <div class="header">
                <router-link to="/strategy" class="header-btnLeft"  ><img src="../assets/strategy-goback.png"></router-link>
                <h1 class="header-title">{{city_name}}</h1>
                <div class="header-btnRight">
                    <div class="header-btnRight" @click="flagSearch">
                        <img src="../assets/strategy-icon-serch.png" class="header-btnRight-img"/>
                    </div>
                </div>
            </div>
            <div class="menuTab">
                <city-tab :config="tabConfig" :selectSubTypeFn="selectSubType"></city-tab>
            </div>
        </div>
        <div style="height: 100px"></div>

        <transition name="fade">
            <div class="search" v-if="flagSearchValue">
                <div class="search-left">
                    <input type="text"  @blur.prevent="searchKey()"  v-model="keywords" placeholder="搜索文章名称"> <!--@input="searchKey"-->
                </div>
                <div class="search-right">
                    <img @click="searchKey" src="../assets/index-search-btn2.png"  class="search-right-btn"/>
                </div>
            </div>
        </transition>
        <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="list loadmore-wrapper"
             ref="wrapper" :style="{ height: wrapperHeight + 'px' }"
             v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="50"
        >
            <div class="list-item" v-for="(item,index) in listArr">
                <div class="list-item-right">
                    <router-link :to="{path:'/articleold',query:{id:item.article_id,city_id:city_id}}">
                        <img class="list-item-img" :src="item.img" alt="">
                        <!--<img class="list-item-play-btn" src="../assets/play-btn.png" alt="" >-->
                    </router-link>
                </div>
                <div class="list-item-left">
                    <router-link :to="{path:'/articleold',query:{id:item.article_id,city_id:city_id}}">
                        <h3 class="list-item-title">{{item.title}}</h3>
                        <p class="list-item-date">{{item.create_time}}</p>
                    </router-link>
                    <div class="btns">
                        <div class="btns-right">
                            <span class="btns-item"><img class="btns-item-img" src="../assets/icon-hist.png" alt="">{{item.browse}}</span>
                            <span class="btns-item" @click="like(index)"><img class="btns-item-img" src="../assets/icon-like.png" alt="">{{item.fabulous}}</span>
                            <span class="btns-item"><img class="btns-item-img" src="../assets/icon-comment22.png" alt="">{{item.comment_num}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="loading && !loadEnd" class="loadmore-loading">
                <mt-spinner type="fading-circle"
                            style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                加载中...
            </div>
            <div v-show="loadEnd" class="loadmore-loading">
                暂无更多数据...
            </div>
        </div>
        <TabBar ref="tabBar" :curr="tabBarCurr"></TabBar>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import cityTab from '../components/city-tab.vue'
    import TabBar from "../components/TabBar"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "guideline",
        components: {
            cityTab,
            TabBar
        },
        data() {
        return {
            url: config.url,
            flagSearchValue: false,
            keywords: '',
            keywordsTime:0,
            tabCurr: 1,
            tabConfig: {
                sub: {
                    arr: [], //{cn_name: '所有', id: 0},
                    activeIndex: 0
                }
            },
            tabBarCurr: 1, //底部导航
            shareView: false,//分享
            shareTop: 0,

            class_id: 0,
            // 分页参数
            listArr: [],
            totalPage: 0,
            pageSize: 10,
            page: 1,
            loadEnd: false,
            loading: false,// 为 true， bottom-method 就不会再次执行加载更多
            wrapperHeight: 0,
            city_id:0, //城市id
            city_name:'',
        }
    },
    methods: {
        selectSubType(subType) {
            this.class_id = subType;
            this.page = 1;
            this.listArr = [];
            this.keywords='';
            this.loadDataMore();
            //}
        },
        flagSearch() {
            this.flagSearchValue = !this.flagSearchValue;
        },
        shareFn(index) {
            if(!this.shareView){
                this.shareTop = document.documentElement.scrollTop
                var item = this.listArr[index]
                this.share({
                    desc: item.title,
                    link: this.url + '/quick_help_wap1/#/article/' + item.article_id, // 分享链接
                    imgUrl: item.img, // 分享图标
                })
            }

            this.shareView = !this.shareView;

        },
        // 获取tab分类、tag
        getTab() {
            this.axios.post('wapclass')
                    .then(res => {
                var tabarr = res.data.map(item => {
                    return {cn_name: item.name, id: item.id};
                })
//                tabarr.unshift({"id":0,"c_name":"全部"});
                this.tabConfig.sub.arr = tabarr;
                this.tabConfig.sub.arr.unshift({"id":0,"cn_name":"全部"})
//                console.log(tabarr)
            })
        .catch(err => console.log(err));
        },
        // 搜索
        searchKey(){
            var _that=this;
            if(new Date().getTime()-_that.keywordsTime>300){
                _that.listArr=[];
                _that.page=1;
                _that.loadEnd=false;
                _that.loading=true; // 为 true， bottom-method 就不会再次执行加载更多
                _that.loadDataMore();
                _that.keywordsTime=new Date().getTime();
            }

        },
        loadDataMore() {
            setTimeout(() => {
                this.getList();
            }, 300);
        },
        getList() {
            let _that = this;
            let params = {
                class_id: _that.class_id,
                city_id:_that.city_id,
                search: _that.keywords,
                pagelimit: _that.pageSize,
                pagenum: _that.page,
            }
            _that.loading = true;
            _that.axios.postAll('waparticle', params)
                    .then(res => {
                if (res) {
                    if (res.data.code == 0 && res.data.data) {
                        let listArr = _that.listArr;
                        let listArrtext = JSON.stringify(listArr);
                        var reg = /^(http|https):\/\//;
                        res.data.data.data.forEach(item => {
                            if (listArrtext.indexOf(JSON.stringify(item)) == -1) {
                                if (!reg.test(item.img)) {
                                    item.img = _that.url + item.img
                                }
                                listArr.push(item);
                            }
                        })
                        _that.page += 1
                        _that.totalPage = res.data.data.totalpage
                        _that.listArr = listArr;

                        if (_that.page <= _that.totalPage) {
                            _that.loading = false;
                            _that.loadEnd = true;
                        }
                        if (res.data.data.data.length < _that.pageSize) {
                            _that.loadEnd = true;
                        }

                    } else {
                        _that.loadEnd = true;
                    }
                    if (_that.$store.state.token) {//分享
                        _that.share({
                            desc: "旅行攻略",
                            link:undefined, // 分享链接
                            imgUrl:undefined, // 分享图标
                        });
                    }
                }
            })
        .catch(err => {
                console.log(err)
            });
        },
        // 点赞
        like(index) {
            if(!this.$store.state.token){
                this.$router.push({path:"/my-login"})
                return;
            }
            var item = this.listArr[index]
            var params = {
                article_id: item.article_id
            }
            this.axios.post('wapfabulous',params)
                    .then(res => {
                Toast({message: res.msg, duration: 1000});
                if(res.msg=='点赞成功'){
                    this.listArr[index].fabulous+=1
                }else{
                    this.listArr[index].fabulous-=1
                }
            })
        .catch(err => console.log(err));
        },
        // 分享
        share(obj) {
            wxShare({
                title: '快帮行', // 分享标题
                desc: obj.desc, // 分享描述
                link: obj.link, // 分享链接
                imgUrl: obj.imgUrl, // 分享图标
                debug: false
            }, () => {//分享成功后的回调函数
                //Toast({message: '分享成功！', duration: 1500});
                console.log('分享成功')
                this.shareView = false;
                this.share({
                    desc: this.tabConfig.sub.arr[0].cn_name, // 分享描述
                    link:undefined,
                    imgUrl:undefined,
                })
            });
        }
    },
    mounted() {
        this.getTab()//获取分类
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - this.$refs.tabBar.$el.offsetHeight;
        this.keywords=this.$route.query.keyword
        this.city_id=this.$route.query.city_id;
        this.city_name=this.$route.query.city_name;
    }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .headfix{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 2.66667rem;
        z-index: 99999;
    }
    .page {
        background:#FFFFFF;
        min-height: 100%;
    }
    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
            h1{
                font-size: rpx(36);
                color: #333333;
                fontFamily: "SourceHanSansCN-Medium",
            }
            &-btnLeft{
                 width: rpx(50);
                 height: rpx(64);
                 /*padding-top: rpx(16);*/
                 line-height:rpx(64);
                    img{
                        width: rpx(22);
                        height: rpx(34);
                    }
            }
            &-btnRight{
                 color: #5D5D5D;
                    &-img {
                         width: rpx(48);
                         height: rpx(48);
                         margin-left: rpx(20);
                     }
             }
            &-title{
                 flex: 1;
                 font-size: rpx(36);
                 text-align: center;
                 font-weight: normal;
             }
    }

    .menuTab {
        position: relative;
        height: rpx(100);
        background: $color0;
        overflow: hidden;
    &-search {
         position: absolute;
         top: 0;
         right: 0;
         z-index: 9999;
         width: rpx(90);
         height: rpx(100);
         padding-top: rpx(30);
         padding-left: rpx(10);
         font-size: rpx(34);
         color: #696969;
     //box-shadow: 0 0 rpx(20) $color2;


    }
    }

    .search {
        display: flex;
        align-items: center;
        padding: rpx(40) rpx(30);
        background: $color0;
        border-top: 1px solid $color2;
    &-left {
         flex: 1;
    input {
        box-sizing: border-box;
        border: rpx(3) solid $color3;
        border-right: none;
        border-radius: rpx($radius10) 0 0 rpx($radius10);
        padding: 0 rpx(20);
        width: 100%;
        height: rpx(90);
        line-height: 1;
        font-size: rpx(30);
    }
    }
    &-right {
         background: $color3;
         border-radius: 0 rpx($radius10) rpx($radius10) 0;
         width: rpx(140);
         height: rpx(90);
         text-align: center;
    &-btn {
         margin-top: rpx(23);
         width: rpx(44);
         height: rpx(44);
     }
    }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .list {
        background:#fff;
    &-item {
             position: relative;
             margin: rpx(40) rpx(0) rpx(0) rpx(20);
             background: $color0;
             display:flex;
             width: rpx(750);
             height: rpx(250);
             border-bottom: rpx(10) solid $bgcolor1;
                &-right{
                     width: rpx(305);
                     height: rpx(250);
                 }
                &-left{
                     width: 100%;
                     height: rpx(250);
                 }

                &-img {
                     width: rpx(260);
                     height: rpx(210);
                     z-index: 8;
                 }
                &-play-btn {
                     position: absolute;
                     left: 50%;
                     top: rpx(152);
                     margin-left: rpx(-48);
                     width: rpx(96);
                     height: rpx(96);
                     z-index: 9;
                 }
                &-title {
                     padding: 0rem 0.4rem;
                     font-size: 0.42667rem;
                     line-height: 130%;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-line-clamp: 3;
                     -webkit-box-orient: vertical;
                 }
                &-date {
                     padding: rpx(15) rpx(30);
                     font-size: rpx(28);
                     color: $color5;
                 }
                &-share {
                     position: absolute;
                     right: rpx(30);
                     bottom: rpx(30);
                     width: rpx(48);
                     height: rpx(48);
                 }
        }
        .btns {
            padding: rpx(20);
            position: relative;
                &-right{
                     position: absolute;
                     right: rpx(20);
                 }
                &-item {
                     margin-right: rpx(30);
                     font-size: rpx(28);
                     color: $color5;
                        &-img {
                             margin-right: rpx(10);
                             width: rpx(32);
                             height: rpx(32);
                         }
                }

        }
    }

    .loadmore-wrapper {
        margin-top: -1px;
        overflow-x: hidden;
        /*-webkit-overflow-scrolling: touch;*/
    }

    .loadmore-loading {
        text-align: center;
        height: rpx(120);
        line-height: rpx(120);
        color: $color5;
    }

    .loadmore-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

    //分享
      .share-div {
          position: absolute;
          background: rgba(0, 0, 0, .5);
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 99999;
          width: 100%;
          height: 100%;
          text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }
    .loadmore-loading{
        display: none;
    }
</style>